<template>
   <div class="contenter">
    	 	<div class='  text-center justify-start  flex  ' style="margin:20rpx;">
           
				<div class=' cu-item   bg-img shadow-blue head_message'   >
				</div>
        <div class=' text-grey  ' bindtap="showModal" data-target="viewModal" style="margin:60rpx 80rpx 0 10rpx; font-size:35rpx;color:white;">
				   排行榜
				</div>
        <div class='cu-btn bg-olive round block shadow  ' role="button" bindtap="showModal" data-target="viewModal" style="margin:60rpx 50rpx 0 80rpx; font-size:32rpx;color:#eee">
				去挑战
				</div>
			</div>
       
	  
			 <div class="cu-list menu-avatar" style="margin:20rpx;border:2px solid  #eee;">
        <div class="cu-item" v-for="(item,key) in rank" :key="key">
          <text class="cu-tag round bg-red sm">{{key +1}}</text>
           <img class="cu-avatar round lg"  :src="item.avatarUrl" background-size="cover" /> 
          <div class="content">
            <div class="text-grey" >{{item.nickName}}</div>
             <div class="text-gray text-sm flex" >
              <text class="text-cut">
										<text v-for="(iconitem,index) in icon" :key="index" class="cuIcon-favorfill lg text-yellow  margin-right-xs"></text> 
                    
                    <!-- <span v-for="(star,index) in starScore" :key="index" :class="star"></span> -->
              </text>
            </div>
          </div>
          <div class="action">
            <div class="cu-tag round bg-grey xl">{{item.score}}</div>
          </div>
        </div>
       </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      progress: 0,
      disabled: false,
      icon: [3],
      rank: []
    }
  },
  computed: {},
  methods: {
    setting () {
      var that = this
      wx.request({
        url: process.env.BASE_API + '/getRank',
        method: 'GET',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          that.rank = res.data
          console.log(that.rank)
        },
        fail: function (error) {
          console.log(error)
        }
      })
    },
    sore: function () {
      for (var i = 0; i < this.rank.length - 1; i++) {
        console.log(this.rank[i].score)
        for (var j = this.rank.length - 1; j > i; j--) {
          if (this.rank[j - 1].score < this.rank[j].score) {
            var temp = this.rank[j - 1]
            this.rank[j - 1] = this.rank[j]
            this.rank[j] = temp
          }
        }
      }
    }
  },
  onLoad: function (options) {
    this.setting()
  }
}
</script>

<style scoped>
page{
  width: 100%;
  height: 100%;
}
.half_star{
		width:0.3rem;
		height: 0.3rem;
		display: inline-block;
		background: url("../../../static/images/star.png");
		background-size: 100%;
	}
	.on_star{
		width:0.3rem;
		height: 0.3rem;
		display: inline-block;
		background: url("../../../static/images/star.png");
		background-size: 100%;
	}
	.off_star{
		width:0.3rem;
		height: 0.3rem;
		display: inline-block;
		background: url("../../../static/images/star.png");
		background-size: 100%;
	}
.contenter{
    position: absolute; 
    width : 100%;
    height: 100%;
    color: black;
    background-image: url("");
   background-repeat:no-repeat; 
   background-size:100% 100%;
   -moz-background-size:100% 100%;

}
.head_message{
  width: 160rpx;
  height:150rpx;
  background-repeat:no-repeat; 
   background-size:100% 100%;
   -moz-background-size:100% 100%;
   margin:20rpx 0rpx 0rpx 50rpx;
   padding:0;
  background-image: url("");
}
.head_message p{
 font-size: 20px;
 margin: 30% auto;
}
.head_message button{
  width: 80%;
  height: 40%;
}
.userinfo-avatar {
 width: 50rpx;
  height:50rpx;
  border-radius: 50%;
  border: solid 2px black;
}
.userlist{
  height: 65%;
  background-color:gainsboro;
  overflow-y: scroll;
  color: black;
  margin: 15px;
}
.number{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 40rpx;
}
</style>